<template>
	<view class="p_bg_all p_bg_f3">
		<view class="p_flex7 p_margin_tb_80" v-if="listData.length == 0">
			<view class="line"></view>
			<view class="p_font_26 p_color_b2">您还没有创建分享清单</view>
			<view class="line"></view>
		</view>
		<view v-else>
			<navigator :url="'/pages/my/shareDetail?edit=true&id=' + item.id" hover-class="none" class="list_wrapper"
				v-for="(item, index) in listData" :key="index">
				<view class="p_flex_1">
					<view class="p_flex">
						<image src="https://dy.sykj365.com/uploads/mini/wenjianjia.png" class="p_img_46 p_margin_r_8"></image>
						<view class="p_flex_1 p_font_32">{{item.name}}</view>
					</view>
					<view class="p_flex2 p_margin_t_12">
						<view class="p_font_22 list_btn active">{{item.num}}份</view>
						<view class="p_font_24 p_color_b2">{{item.create_time}}</view>
					</view>
				</view>
				<view class="p_font_24 list_btn">查看/分享</view>
			</navigator>
		</view>
		<view class="wrapper">
			<view class="p_font_28 title">
				<view>分享清单是什么？</view>
			</view>
			<view class="p_font_26" style="line-height: 44rpx;">创建分享清单后分享给好友，好友点击可查看清单内的文件并一键加入打印列表，实现资料共享，方便一份资料多人多次印刷
			</view>
		</view>
		<view class="p_flex7">
			<view class="p_font_26 p_color_05b570 des" @click="isShow = true">创建分享清单</view>
		</view>
		<!-- 添加弹窗 -->
		<van-dialog use-slot :show="isShow" closeOnClickOverlay confirm-button-text="立即上传" @confirm="getLink" @overlay="isShow = false">
			<view class="p_font_26 p_lr_24 p_margin_tb_24">上传待打印的文件后，点击“分享清单”按钮进行创建，如图</view>
			<image src="https://dy.sykj365.com/uploads/mini/tupian.png" mode="widthFix" style="width: 100%;"></image>
		</van-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				listData: [],
			}
		},
		onLoad() {
			this.getListData();
		},
		onShow() {
			if(uni.getStorageSync('share')) {
				this.getListData();
				uni.removeStorageSync('share');
			}
		},
		methods: {
			getLink() {
				getApp().getNavigateTo('/pages/index/printList');
			},
			getListData() {
				this.$http.post(this.$api.shareInfo).then(res => {
					this.listData = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.line {
		width: 40rpx;
		height: 1px;
		margin: 0 10rpx;
		background-color: #b2b2b2;
	}

	.wrapper {
		margin: 0 32rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.title {
		display: flex;

		view {
			padding: 12rpx 36rpx;
			border-radius: 48rpx;
			background-color: rgba(5, 181, 112, 0.16);
			margin-bottom: 15rpx;
		}
	}

	.des {
		margin: 40rpx;
		text-decoration: underline;
	}

	.list_wrapper {
		margin: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
	}

	.list_btn {
		padding: 4rpx 10rpx;
		color: #05B570;
		border-radius: 32rpx;
		border: 1px solid #05B570;
		margin-left: 100rpx;

		&.active {
			padding: 0 12rpx;
			margin-left: 0;
			margin-right: 16rpx;
		}
	}
</style>